<template>
  <div class="sp_c" v-if="list.length">
    <dl v-for="(i,index) in list" :key="index" class="spc" @click="toNextpage5(i)">
      <dd class="spk-top">
        <img :src="baseUrl + i.cover_image" alt="">
      </dd>
      <dt class="spk-bottom">
        <h4>{{i.title}}</h4>
        <p>专家：{{i.teacher_name}}</p>
      </dt>
    </dl>
  </div>
  <div v-else class="none">暂无购买信息</div>
</template>
<script>
export default {
  name: "shipin",
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASEURL
    };
  },
  props: {
    list: {
      type: Array
    }
  },
  methods: {
    toNextpage5(i) {
      this.$router.push({ path: `kechengy/${i.id}` });
    }
  },
  async mounted() {}
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.sp_c {
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-content: space-between;
  margin: 15px auto;
  padding: 0 15px;
  flex-wrap: wrap;
}
.sp_c dl {
  width: 165px;
  height: 199px;
  margin-bottom: 15px;
}
.sp_c dl:nth-child(2n-1) {
  margin-right: 15px;
}
.spc .spk-top {
  width: 164.5px;
  height: 122.5px;
  background: red;
  margin: 0 auto;
  border-radius: 5px 5px 0 0;
  border-radius: 5px;
}
.spk-top > img {
  width: 100%;
  height: 100%;
}
.spk-bottom {
  width: 100%;
  height: 76.5px;
  background: #f3f4f9;
}
.spk-bottom h4 {
  font-size: 14px;
  color: #333333;
  font-weight: 400;
  padding: 11px 0 0 11px;
}
.spk-bottom p {
  font-size: 10px;
  color: #606165;
  font-weight: 400;
  padding: 5px 0 0 11px;
}
.none {
  font-size: 16px;
  margin: 30px 0;
  width: 100%;
  text-align: center;
  color: #606165;
}
</style>